<template>
	<view class="" :style="[AppSkinVar]">
		<view class="t-posi-top">
			<view class="btn-left">
				<image class="img-48" :src="$staticPath('classify/close.png')" mode="" @tap="$back()"></image>
			</view>
			<view class="btn-right">
				<image class="img-48" :src="$staticPath('user/success_red.png')" mode="" @tap="handleSelect"></image>
			</view>
		</view>
		<view class="t-map">
			<tmap :latitude="latitude" :longitude="longitude" @mapPan="mapPan"></tmap>
		</view>
		<view class="t-addr-list">
			<view class="t-addr-list__search">
				<view class="t-addr-list__search--input">
					<input style="width: 100%;" type="text" name="" id="" v-model="searchValue" @input="handleSearch"
						:placeholder="$t('store.搜索地点')" />
				</view>
				<image class="img-42" :src="$staticPath('user/close.png')" mode="" @tap="del"></image>
			</view>
			<view class="">
				<scroll-view scroll-y="true" class="t-map-scroll-view" @scrolltolower="getData">
					<view class="e-p-20">
						<view class="t-map-line" v-for="(item, index) in addrList" :key="index" @tap="handleClick(index)">
							<view class="e-flex-1">
								<view class="c-333 e-font-30 e-m-b-10">
									{{ item.title }}
								</view>
								<view class="c-666 e-font-26">
									{{ item.vicinity }}
								</view>
							</view>
							<view class="" style="width: 30px;">
								<image class="img-36" v-if="item.check" :src="$staticPath('user/success_red.png')" mode="">
								</image>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { debounce } from '@/common/utils'
import {
	searchAddress,
	nearbyAddress
} from '@/common/utils/map'
import {
	useCurrentInstance
} from '@/common/hooks'
import type {PickPromise} from '@/typings/utils'

const ctx = useCurrentInstance()

const latitude = ref(39.908823)
const longitude = ref(116.39747)
const searchValue = ref('')
const page_index = ref(1)
type AddressItem = Omit<PickPromise<ReturnType<typeof nearbyAddress>>[0],""> & {
	check?:boolean
}
const addrList = ref<AddressItem[]>([])

const a:AddressItem[] = []
const del = () => {
	searchValue.value = ''
}
const handleClick = (index: number) => {
	addrList.value.forEach(item => item.check = false)
	addrList.value[index].check = true
	const data = addrList.value[index]
	latitude.value = data.location.lat
	longitude.value = data.location.lng
	uni.$emit('updateMapCenter', {
		lat: latitude.value,
		lng: longitude.value
	})
}
const getData = () => {
	if (page_index.value > 10) return
	const params = {
		keyword: searchValue.value,
		latitude: latitude.value,
		longitude: longitude.value,
		page_index: page_index.value
	}
	searchAddress(params).then(res => {
		addrList.value.push(...res.map(item => {
			return {
				...item,
				check: false
			}
		}))
		page_index.value++

	})
}
const handleSearch = debounce(function () {
	addrList.value = []
	page_index.value = 1
	getData()
}, 500)
const mapPan = (location: { latitude: number, longitude: number }) => {
	nearbyAddress({
		latitude: location.latitude,
		longitude: location.longitude
	}).then(res => {
		addrList.value = res.map(item => {
			return {
				...item,
				check: false
			}
		})
	})
}
const handleSelect = () => {
	const data = addrList.value.find(item => item.check)
	const eventChannel = ctx.getOpenerEventChannel();
	eventChannel.emit('updateSelectAddr', data)
	ctx.$back()
}

onMounted(() => {
	let location = uni.getStorageSync('userGeolocation')
	if (location) {
		latitude.value = location.longitude
		longitude.value = location.latitude
	}
	nearbyAddress({
		latitude: latitude.value,
		longitude: longitude.value
	}).then(res => {
		addrList.value = res.map(item => {
			return {
				...item,
				check: false
			}
		})
	})
})


</script>


<style lang="scss">
.t-posi-top {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	background-color: linear-gradient(180deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0));
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 999999;
	padding: 20rpx 50rpx;
}

.btn-left {
	padding: 4rpx 30rpx;
	border-radius: 10rpx;
	background-color: #ebebeb;
}

.btn-right {
	padding: 4rpx 30rpx;
	border-radius: 10rpx;
	background-color: #000;
}

.t-map {
	width: 100vw;
	height: 600rpx;
}

.t-addr-list {
	width: 100vw;
	height: calc(100vh - 600rpx);
	background: #fff;
	position: relative;
	z-index: 999999;

	&__search {
		padding: 0 20rpx;
		height: 100rpx;
		display: flex;
		align-items: center;

		&--input {
			flex: 1;
			height: 70rpx;
			border-radius: 20rpx;
			padding: 0 20rpx;
			background: #ebebeb;
			margin-right: 20rpx;
			display: flex;
			align-items: center;
		}
	}
}

.t-map-scroll-view {
	width: 100%;
	height: calc(100vh - 700rpx);
}

.t-map-line {
	width: 100%;
	padding: 20rpx 0;
	border-bottom: 1px solid #ebebeb;
	display: flex;
	align-items: center;
}
</style>